import React from 'react';
import {InputItem,Button} from 'antd-mobile'
import {getCode} from '../api/api'
import {registerAction} from '../store/actions/user'
import {connect} from 'react-redux'
import {Dispatch} from 'redux'
interface Iprops{
  dispatch:Dispatch
}
class Register extends React.Component<Iprops> {
    state = {
      phone:'',
      code:"",
      password:"",
      nickName:""
    }
    getCode=()=>{
      let phone = this.state.phone.replace(/ +/g,'');
      getCode(phone).then(data=>{
        console.log(data)
      })
    }
    register = ()=>{
      let phone = this.state.phone.replace(/ +/g,'');
      this.props.dispatch(registerAction({
        captcha:this.state.code,
        phone:phone,
        password:this.state.password,
        nickName:this.state.nickName
      }))
    }
    changePhone=(e:any)=>{
      this.setState({
        phone:e
      })
    }
    render() {
        let {phone,code,password,nickName} = this.state;
        return <div className=''>
          <InputItem
            value={phone}
            type="phone"
            placeholder=""
            onChange={this.changePhone}
          >手机号码</InputItem>
          <Button onClick={this.getCode}>获取验证码</Button>
          <InputItem
            value={code}
            onChange={(v)=>this.setState({code:v})}
            type="text"
            placeholder="验证码"
          >验证码</InputItem>
          <InputItem
            value={password}
            onChange={(v)=>this.setState({password:v})}
            type="password"
            placeholder="****"
          >密码</InputItem>
          <InputItem
            value={nickName}
            onChange={(v)=>this.setState({nickName:v})}
            type="text"
            placeholder="昵称"
          >昵称</InputItem>

          
          <Button onClick={this.register}>注册</Button>
        </div>;
    }
}
export default connect(()=>({}),(dispatch)=>{
  return {
    dispatch
  }
})(Register)